<template>
  <ul class="setUpWrapper">
    <li
      :class="[curIndex === index ? 'active' : '']"
      v-for="(item, index) in menus"
      :key="index"
      @click="setup(item, index)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { ISetupMenu } from '@/components/const'
@Component({})
export default class SetupMenu extends Vue {
  private menus: ISetupMenu[] = [
    {
      name: '个人资料',
      fn: 'profile',
      id: 1,
    },
    {
      name: '隐私设置',
      fn: 'setup',
      id: 2,
    },
    {
      name: '我的关注',
      fn: 'follow',
      id: 3,
    },
    {
      name: '关注我的',
      fn: 'followme',
      id: 4,
    },
  ]
  private curIndex = -1

  private setup(item: ISetupMenu, index: number) {
    this.curIndex = index
    this.$emit(item.fn, item)
  }
}
</script>

<style lang="scss" scoped>
.setUpWrapper {
  box-sizing: border-box;
  padding: 10px;
  list-style: none;
  li {
    cursor: pointer;
    padding: 15px;
    color: #ffff;
    background-color: #171821;
    border-bottom: 1px solid #2a292e;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    &.active {
      transition: all 0.5s;
      box-shadow: rgb(255 255 255 / 25%) 0px 54px 55px,
        rgb(255 255 255 / 12%) 0px -12px 30px,
        rgb(255 255 255 / 12%) 0px 4px 6px, rgb(255 255 255 / 17%) 0px 12px 13px,
        rgb(255 255 255 / 9%) 0px -3px 5px;
    }
    &:hover {
      transition: box-shadow 0.5s;
      box-shadow: rgb(255 255 255 / 25%) 0px 54px 55px,
        rgb(255 255 255 / 12%) 0px -12px 30px,
        rgb(255 255 255 / 12%) 0px 4px 6px, rgb(255 255 255 / 17%) 0px 12px 13px,
        rgb(255 255 255 / 9%) 0px -3px 5px;
    }
  }
}
</style>
